<template>
    <div class="p-chart-ytdwfb2"></div>
</template>

<script>
    export default {
        data() {
            return {
                datas: [
                    {"unit":"华中师范大学","total":42,"2018":10,"2019":15,"2020":17},
                    {"unit":"北京师范大学","total":23,"2018":5,"2019":9,"2020":9},
                    {"unit":"陕西师范大学","total":10,"2018":3,"2019":3,"2020":4},
                    {"unit":"华东师范大学","total":8,"2018":2,"2019":5,"2020":1},
                    {"unit":"江西师范大学","total":7,"2018":1,"2019":3,"2020":3},
                    {"unit":"东北师范大学","total":5,"2018":0,"2019":3,"2020":2},
                    {"unit":"华南师范大学","total":5,"2018":1,"2019":1,"2020":3},
                    {"unit":"浙江大学","total":5,"2018":0,"2019":2,"2020":3},
                    {"unit":"北京航空航天大学","total":4,"2018":0,"2019":3,"2020":1},
                    {"unit":"西南大学","total":4,"2018":0,"2019":2,"2020":2}
                ]
            }
        },
        computed: {},
        watch: {},
        mounted() {
            this.initChart();
        },
        methods: {
            initChart(){
                this.chartDiv = echarts.init(document.querySelector('.p-chart-ytdwfb2'));
                this.chartDiv.showLoading({
                    text:'正在加载数据...'
                });
                const xAxisData = this.datas.map(i => i.unit)
                const legendData = ['2020', '2019', '2018'].reverse()
                let seriesData = [];
                legendData.forEach(i => {
                    seriesData.push({
                        name: i,
                        type: 'bar',
                        // silent: true,
                        barWidth: '40',
                        barMinHeight: 2,
                        stack: 'total',
                        // barGap: '-100%', // Make series be overlap
                        data: this.datas.map(j => j[i]),
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,		//开启显示
                                    position: 'inside',	//在上方显示
                                    textStyle: {	    //数值样式
                                        color: '#fff',
                                        fontSize: 12,
                                    }
                                }
                            }
                        }
                    })
                })


                const option = {
                    color:['#1bc481', '#ffaf3c', '#eb5e66', '#3898e5', "#7EC0EE", "#FF9F7F", "#FFD700", "#C9C9C9", "#E066FF", "#C0FF3E"],
                    // const color =['#1bc481',  '#ffaf3c',  '#eb5e66' , '#3898e5', '#1cf9ea' ];
                    title: {
                        text: "依托单位分布",
                        subtext: `按2018-2020年批准项目总数前十依托单位排序`,
                        top: 0,
                        left: 'center',
                        textStyle: {
                            fontSize: 16,
                            color: 'grey',
                        },
                    },
                    animation: true,
                    grid: {
                        top: '50',
                        left: '32',
                        bottom: '45',
                        right: '39',
                        containLabel: true,
                    },
                    legend: {
                        show: true,
                        bottom: 0,
                        // left: 'middle',
                        data: legendData,
                        textStyle: {
                            // color: 'RGB(193,223,255)',
                        },
                    },
                    tooltip: {
                        trigger: "axis",
                    },
                    xAxis: [{
                        type: 'category',
                        name: '年份',
                        nameTextStyle: {
                            fontSize: 12, // 这个会影响坐标轴的字体大小，不懂为什么
                            fontFamily: '微软雅黑',
                            align: 'center',
                        },
                        data: xAxisData,
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            lineStyle: {
                                color:  'rgba(202,202,202,0.15)',
                            },
                        },
                        axisLabel: {
                            rotate: 30,
                            // margin: 20,
                            textStyle: {
                                color: 'black',
                            },
                        },
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '数量',
                        nameTextStyle: {
                            fontSize: 12, // 这个会影响坐标轴的字体大小，不懂为什么
                            fontFamily: '微软雅黑',
                        },
                        axisLabel: {
                            textStyle: {
                                // color: 'white',
                                color: 'black',
                            },
                            formatter: '{value}',
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                // type: "dashed",
                                color: "#E9E9E9"
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: 'RGB(47,68,114)',
                            },
                        },
                    }],
                    series: seriesData,
                };

                setTimeout(() => {
                    this.chartDiv.setOption(option);
                    this.chartDiv.hideLoading();
                }, 700);

                window.addEventListener("resize",()=>{
                    this.chartDiv.resize();
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
.p-chart-ytdwfb2{
    padding: 50px 100px;
    width: 85vw;
    height: 550px;
} 
@media (max-width:1060px) {
.p-chart-ytdwfb2{
    width: 100vw;
    padding: 15px 0;
    height: 400px;
} 
}
 
</style>
